<template>
    <div class='right' ref='view_right'>
        <template v-if='loading'>
            <v-overlay :absolute='true' :opacity='0.68' :value='loading' :z-index='500'>
                <v-progress-circular
                    :value='value'
                    :rotate='360'
                    :size='130'
                    :width='15'
                    color='teal'
                >
                    <v-progress-circular
                        :rotate='360'
                        :size='80'
                        :width='15'
                        color='teal'
                        :indeterminate='true'
                    >
                        <span class='loading_view' style='color: #fff;'>{{ value }}%</span>
                    </v-progress-circular>
                </v-progress-circular>
            </v-overlay>
        </template>
        <template v-if='nowType === "3D" || nowType === "A"'>
            <canvas3d
                :list='nowViewData.list'
                :background='nowType === "3D" ? "#bcbcbc" : "#dadada"'
                ref='children_canvas'
                @loading='updateLoad'
            ></canvas3d>
        </template>
        <template v-else-if='nowType === "2D"'>
            <canvas2d
                :dimensional='nowViewData.list'
                :is-ren.sync='isRen'
                :dimensional-config='nowViewData.dimensionalConfig'
                @changeIframeInner='processToIframeHandler'
                ref='children_canvas'
                @loading='updateLoad'
            ></canvas2d>
        </template>
        <template v-else-if='nowType === "inner"'>
            <iframe-inner :src='nowViewData.viewSrc'></iframe-inner>
        </template>
        <template v-else-if='nowType === "home"'>
            <home2d ref='children_canvas'></home2d>
        </template>
        <div class='right-btn'>
            <template v-if='nowType !== "inner"'>
                <div class='right-btn-group'>
                    <div class='btn' @click='strainScale(1)'>
                        <v-icon color='#fff'>mdi-plus</v-icon>
                    </div>
                    <div class='btn' @click='strainScale(-1)'>
                        <v-icon color='#fff'>mdi-minus</v-icon>
                    </div>
                    <div class='btn' @click='strainPosition(0, -1)'>
                        <v-icon color='#fff'>mdi-arrow-left-bold</v-icon>
                    </div>
                    <div class='btn' @click='strainPosition(0, 1)'>
                        <v-icon color='#fff'>mdi-arrow-right-bold</v-icon>
                    </div>
                    <div class='btn' @click='strainPosition(1, 0)'>
                        <v-icon color='#fff'>mdi-arrow-up-thick</v-icon>
                    </div>
                    <div class='btn' @click='strainPosition(-1, 0)'>
                        <v-icon color='#fff'>mdi-arrow-down-thick</v-icon>
                    </div>

                    <div
                        class='btn'
                        @click='strainNext("prev")'
                        v-show='nowType !== "2D" && nowType !== "home"'
                    >
                        <v-icon color='#fff'>mdi-redo</v-icon>
                    </div>
                    <div
                        class='btn'
                        style='transform: scaleX(-1);'
                        @click='strainNext("next")'
                        v-show='nowType !== "2D" && nowType !== "home"'
                    >
                        <v-icon color='#fff'>mdi-redo</v-icon>
                    </div>
                </div>
            </template>
            <div class='right-btn-group-gap'>
                <div class='btn 3D' v-show='nowType !== "3D"' @click='btnClickHandler("3D")'>3D</div>
                <div class='btn 2D' v-show='nowType !== "2D"' @click='btnClickHandler("2D")'>2D</div>
                <div
                    class='btn A'
                    v-show='nowType !== "A" && filterRightViewData._A.length !== 0'
                    @click='btnClickHandler("A")'
                >A</div>
                <div
                    class='btn people'
                    v-show='(nowType === "2D" || nowType === "A" || nowType === "3D") && isHomeShowRen'
                    @click='btnChangeHandler()'
                ></div>
            </div>
        </div>
    </div>
</template>


<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
import Canvas3d from './canvas_views/3d';
import Canvas2d from './canvas_views/2d';
import IframeInner from './canvas_views/iframe_inner';
import Home2d from './canvas_views/home_2d';
import config from '@/../config/client.js';
import { AutoUnevent } from '@/utils/utilFun.js';
const event = new AutoUnevent();
export default {
    data() {
        return {
            isRen: false,
            value: 0,
            loading: true,
        };
    },
    mounted() {
        const view_right = this.$refs['view_right'];
        event.on(
            view_right,
            'mousewheel',
            e => {
                if (this.loading) {
                    return false;
                }
                if (e.wheelDelta > 0) {
                    this.strainScale(1);
                } else {
                    this.strainScale(-1);
                }
            },
            {
                passive: true,
            }
        );
    },
    beforeDestroy() {
        event.clear();
    },
    components: {
        Canvas3d,
        Canvas2d,
        IframeInner,
        Home2d,
    },
    methods: {
        ...mapMutations({
            commitListState: 'viewList/commitListState',
            commitSearchDataState: 'searchData/commitState',
        }),
        btnClickHandler(type) {
            if (this.isHomeShow) {
                if (this.isHomeShowRen && type === '3D') {
                    this.commitSearchDataState({
                        k: 'isHomeShowRen',
                        v: false,
                    });
                } else {
                    this.commitSearchDataState({
                        k: 'isHomeShowRen',
                        v: true,
                    });
                }
            }
            if (this.isRen) {
                this.isRen = false;
            }
            if (type !== 'inner') {
                this.initLoad();
            }
            this.commitListState({
                k: 'nowType',
                v: type,
            });
        },
        btnChangeHandler() {
            this.isRen = true;
            if (this.rightViewData.dimensionalConfig.length === 1) {
                this.processToIframeHandler(this.rightViewData.dimensionalConfig[0]);
                return;
            }
            this.commitListState({
                k: 'nowType',
                v: 'home',
            });
        },
        strainScale(a) {
            const el = this.$refs['children_canvas'];
            if (a === 1) {
                el.strainScale(0.2);
            } else {
                el.strainScale(-0.2);
            }
        },
        strainPosition(a, b) {
            const el = this.$refs['children_canvas'];
            console.log(el);
            if (b === -1) {
                el.offset(-20, 0, true);
            } else if (b === 1) {
                el.offset(20, 0, true);
            }
            if (a === -1) {
                el.offset(0, 20, true);
            } else if (a === 1) {
                el.offset(0, -20, true);
            }
        },
        strainNext(next) {
            const el = this.$refs['children_canvas'];
            if (next === 'next') {
                next = 1;
            } else if (next === 'prev') {
                next = -1;
            }
            el.nextImage(next);
        },
        processToIframeHandler(dimensionalItem) {
            if (!dimensionalItem || !this.isRen) {
                return;
            }
            const { to } = dimensionalItem;

            this.commitListState({
                k: 'viewSrc',
                v: to || config.temporaryPublicToUrl,
            });
            this.commitListState({
                k: 'nowType',
                v: 'inner',
            });
        },
        updateLoad(start, end) {
            const procc = (start / end) * 100;
            setTimeout(() => {
                this.value = procc.toFixed(1);
            }, 16);

            if (parseInt(procc) === 100) {
                setTimeout(() => {
                    this.loading = false;
                    this.value = 0;
                }, 500);
            }
        },
        initLoad() {
            this.loading = true;
        },
    },
    computed: {
        ...mapState({
            rightViewData: state => state.viewList.rightViewData,
            nowType: state => state.viewList.nowType,
            isHomeShow: state => state.searchData.isHomeShow,
            isHomeShowRen: state => state.searchData.isHomeShowRen,
        }),
        ...mapGetters({
            nowViewData: 'viewList/nowViewData',
        }),
        filterRightViewData() {
            const data = this.rightViewData;
            if (data.dimensionalConfig.length === 1) {
                this.processToIframeHandler(data.dimensionalConfig[0]);
            }
            return {
                _3D: data.plane,
                _A: data.solid,
                _2D: data.dimensional,
            };
        },
    },
    watch: {
        rightViewData() {
            if (this.nowType !== 'inner') {
                this.initLoad();
            }
        },
        isHomeShow() {
            if (!this.isHomeShow && !this.isHomeShowRen) {
                this.commitSearchDataState({
                    k: 'isHomeShowRen',
                    v: true,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.right {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .loading_view {
        font-size: 13px;
    }
    .right-btn {
        position: absolute;
        width: 30px;
        right: 20px;
        bottom: 40px;
        transform: translateY(-30px);
        @media (max-width: 450px) {
            right: 2.5px;
        }
        .right-btn-group {
            margin-bottom: 10px;
            border-radius: 6px;
            overflow: hidden;
            .btn {
                width: 28px;
                height: 25px;
                background-color: #4f4f4f;
                text-align: center;
                line-height: 25px;
                color: #fff;
                font-size: 14px;
                transition: background 1s ease;
                margin-top: -1px;
                cursor: pointer;
                &:hover {
                    background-color: #222222;
                }
            }
        }
        .right-btn-group-gap {
            margin-bottom: 10px;
            overflow: hidden;
            .btn {
                width: 28px;
                height: 25px;
                background-color: #4f4f4f;
                text-align: center;
                line-height: 25px;
                color: #fff;
                font-size: 14px;
                transition: background 1s ease;
                margin-bottom: 10px;
                border-radius: 4px;

                cursor: pointer;
                &:hover {
                    background-color: #222222;
                }
            }
            .people {
                background: url(/image/jinren.png);
                background-position: center center;
                background-size: 110% 113%;
            }
        }
    }
}
</style>





